<template>
    <div class="login">
        <div class="d1_bg">
            <div id="login_dev" class="login_dev">
                <div class="login_sheet">
                    <div class="sheet">
                        <p class="sheet_title" @click="click_login_username">
                            <span class="click_text">账户登录</span>
                        </p>
                    </div>
                    <!--          <div class="sheet">-->
                    <!--            <p class="sheet_title" @click="click_login_wechat">-->
                    <!--              <span class="click_text">微信登录</span>-->
                    <!--            </p>-->
                    <!--          </div>-->
                </div>
                <!--                <div class="sheet_under">-->
                <!--                    <div class="sheet_under_line_div">-->
                <!--                        <div-->
                <!--                            class="sheet_under_line"-->
                <!--                            v-bind:style="sheet1_style"-->
                <!--                        ></div>-->
                <!--                    </div>-->
                <!--                    <div class="sheet_under_line_div">-->
                <!--                        <div-->
                <!--                            class="sheet_under_line"-->
                <!--                            v-bind:style="sheet2_style"-->
                <!--                        ></div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <div class="sheet-content">
                    <div class="errorMsg">{{ errormsg }}</div>
                    <!--用户名密码登录-->
                    <div>
                        <!--          <div v-if="is_user_username == true">-->
                        <div style="margin-bottom: 10px;height: 120px">
                            <div class="input_div">
                                <input
                                    type="text"
                                    placeholder="用户名/手机号"
                                    class="login_input"
                                    v-model="form_value.username"
                                />
                            </div>

                            <div class="input_div" v-show="is_need_msgcode == false">
                                <input
                                    type="password"
                                    placeholder="请输入密码"
                                    class="login_input"
                                    v-model="form_value.password"
                                />
                            </div>
                            <div
                                style="margin-top: 20px"
                                v-show="is_need_msgcode == true"
                            >
                                <div
                                    class="login_msgcode_div"
                                    style="width: 50%"
                                >
                                    <input
                                        placeholder="请输入验证码"
                                        class="login_msgcode_input"
                                        v-model="form_value.msgcode"
                                    />
                                </div>
                                <div class="btn_send_msgcode_div">
                                    <button
                                        class="btn_send_msgcode"
                                        @click="click_get_msg_code"
                                        v-bind:disabled="disable_msgcode_btn"
                                    >
                                        <p style="font-size: 11px;color: white">
                                            {{ btn_get_msgcode_text }}
                                        </p>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="login_option_div">
                            <div class="msg_code_div font_size">
                                <p
                                    @click="click_msgcode_login"
                                    class="click_text"
                                >
                                    {{ is_need_msgcode ? '密码登录' : '验证码登录' }}
                                </p>
                            </div>
                            <div class="forget_psw_div font_size" v-if="!is_need_msgcode">
                                <p @click="click_forget_pwd" v-bind:disabled="disable_forget_pwd_btn"
                                   class="click_text">
                                    {{ forget_pwd_brn_msg }}
                                </p>
                            </div>
                        </div>
                        <div class="btn_login_div">
                            <button class="btn_login" @click="loginBtn">
                                {{
                                    is_login_succ == false
                                        ? '登录'
                                        : '登陆成功'
                                }}
                            </button>
                        </div>
                        <div class="register_div">
                            <span
                                class="click_text"
                                @click="registerBtn"
                            >没有账号？去注册</span
                            >
                        </div>
                    </div>
                    <!--微信登录-->
                    <!--          <div v-else-if="is_user_username == false">-->
                    <!--            <img src="../assets/image/sucai/qrcode.png"/>-->
                    <!--          </div>-->
                </div>
            </div>
            <div class="img2"></div>
        </div>
        <footer-record></footer-record>
    </div>
</template>
<script>
// import AES from 'ase';
import footerRecord from '../components/footerRecord.vue';
import aesUtil from '../plugins/common/aesUtil';
import Fingerprint2 from 'fingerprintjs2';
import Vue from 'vue';

export default {
    data() {
        return {
            errormsg: '', // 错误提示
            is_user_username: true,
            is_need_msgcode: false,
            sheet1_style: null,
            sheet2_style: {
                'background-color': 'white'
            },
            aes_key: 'Cxwx2020',
            form_value: {
                username: null,
                password: null,
                msgcode: null
            },
            disable_msgcode_btn: false,
            disable_forget_pwd_btn: false,
            btn_get_msgcode_text: '获取验证码',
            forget_pwd_brn_msg: '忘记密码',
            count: 0,
            clockdown_time: 60,
            brower_finger_print: null,
            is_login_succ: false
        };
    },
    mounted() {
        let self = this;
        setTimeout(function () {
            Fingerprint2.get({screen_resolution: true}, function (components) {
                var values = components.map(function (component) {
                    return component.value;
                });
                var murmur = Fingerprint2.x64hash128(values.join(''), 31);
                // console.log(murmur);
                self.brower_finger_print = murmur;
            });
        }, 500);
    },
    watch: {
        count(newone) {
            if (this.count >= 0 && this.count < this.clockdown_time) {
                this.btn_get_msgcode_text = '已发送(' + newone + ')';
            }
        }
    },
    components: {
        footerRecord
    },
    methods: {
        click_login_username: function () {
            this.is_user_username = true;
            this.sheet1_style = null;
            this.sheet2_style = {
                'background-color': 'white'
            };
        },
        click_login_wechat: function () {
            this.is_user_username = false;
            this.sheet2_style = null;
            this.sheet1_style = {
                'background-color': 'white'
            };
        },
        click_msgcode_login: function () {
            this.is_need_msgcode = !this.is_need_msgcode;
        },
        //忘记密码
        click_forget_pwd: function () {
            if (!this.form_value.username) {
                this.errormsg = '请输入用户名/手机号';
                return
            }
            this.errormsg = '';
            this.$api.ajaxData({
                pathName: 'doGetPwd',
                params: {
                    phone: this.form_value.username
                }
                // eslint-disable-next-line no-unused-vars
            }).then(res => {
                this.forget_pwd_brn_msg = '密码已发送到手机'
            })
        },
        // 登录按钮点击
        loginBtn: function () {
            // 是否需要验证码
            if (this.is_need_msgcode) {
                // 验证码登录
                this.ajaxLoginByYzm();
            } else {
                // 密码登录
                this.ajaxLoginByUser();
            }

        },
        // 密码登录
        ajaxLoginByUser() {
            if (!this.form_value.username) {
                this.errormsg = '请输入用户名/手机号';
                return
            } else if (!this.form_value.password) {
                this.errormsg = '请输入密码';
                return
            }
            this.errormsg = '';
            this.$api
                .ajaxData({
                    pathName: 'loginByUser',
                    method: 'get',
                    params: {
                        phone: this.form_value.username,
                        password: encodeURIComponent(aesUtil.encrypt(
                            this.form_value.password
                        )),
                        logintype: 'pc',
                        pushid: 1,
                        deviceid: this.brower_finger_print
                    },
                    errorFunc: false
                })
                .then(res => {
                    this.is_login_succ = true;
                    let account = Object.assign(res.obj.baseinfo, {
                        phone: this.form_value.username
                    });
                    Vue.prototype.$util.setCookie(
                        'token',
                        res.obj.token
                    );
                    Vue.prototype.$util.setCookie(
                        'account',
                        JSON.stringify(account)
                    );
                    this.$router.replace({name: 'homepage'});
                })
                .catch(msg => {
                    this.errormsg = msg;
                });
        },
        // 验证码登录
        ajaxLoginByYzm() {
            if (!this.form_value.username) {
                this.errormsg = '请输入用户名/手机号';
                return
            } else if (!this.form_value.msgcode) {
                this.errormsg = '请输入验证码';
                return
            }
            this.errormsg = '';
            this.$api
                .ajaxData({
                    pathName: 'loginByYzm',
                    method: 'get',
                    params: {
                        phone: this.form_value.username,
                        yzm: this.form_value.msgcode,
                        logintype: 'pc',
                        deviceid: this.brower_finger_print
                    },
                })
                .then(res => {
                    this.is_login_succ = true;
                    let account = Object.assign(res.obj.baseinfo, {
                        phone: this.form_value.username
                    })
                    Vue.prototype.$util.setCookie(
                        'token',
                        res.obj.token
                    );
                    Vue.prototype.$util.setCookie(
                        'account',
                        JSON.stringify(account)
                    );
                    this.$router.replace({name: 'homepage'});
                })
                .catch(msg => {
                    this.errormsg = msg;
                });
        },
        //注册按钮
        registerBtn: function () {
            this.$router.push({name: 'register'});
        },
        //获取验证码
        click_get_msg_code: function () {
            if (!this.form_value.username) {
                this.errormsg = '手机号不能为空';
                return
            }
            let option = {
                pathName: 'getLoginYzm',
                method: 'get',
                params: {
                    phone: this.form_value.username
                }
            };
            this.$api.ajaxData(option)
                .then(() => {
                    this.btn_get_msgcode_text = '已发送(60)';
                    this.disable_msgcode_btn = 'disabled';
                    // 开始倒计时
                    this.count = this.clockdown_time;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= this.clockdown_time) {
                            this.count--;
                        } else {
                            this.btn_get_msgcode_text = '获取验证码';
                            this.disable_msgcode_btn = false;
                            clearInterval(this.timer);
                        }
                    }, 1000);
                })
                .catch(msg => {
                    this.$util.alert('获取验证码失败：' + msg);
                });
        }
    }
};
</script>
<style scoped lang="scss">
.login {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 13px;

    .d1_bg {
        position: relative;
        min-height: 620px;
        width: 100%;
        height: 80%;
        background: url('../assets/image/back/u4662.png') no-repeat;
        background-position: top center;
        background-size: 100% 100%;
    }

}

.login_dev {
    position: absolute;
    top: 50%;
    right: 5%;
    width: 400px;
    background: white;
    margin-top: -180px;
}

.login_sheet {
    height: 66px;
}

.sheet {
    //float: left;
    width: 200px;
    height: 70px;
    line-height: 70px;
    margin: 0 auto;
    text-align: center;
    /*background-color: red;*/
}

.sheet_under {
    height: 4px;
}

.sheet_under_line_div {
    float: left;
    width: 200px;
    height: 100%;
    margin: 0 auto;
    /*text-align: center;*/
}

.sheet_under_line {
    background-color: #8ab6f6;
    height: 3px;
    width: 80px;
    margin: 0 auto;
}

.sheet_title {
    //margin-top: 30px;
    font-size: 16px;
}

.click_text {
    cursor: pointer;
}

.input_div {
    width: 300px;
    height: 44px;
    margin-top: 20px;
    border: 1px solid rgba(153, 153, 153, 1);
    border-radius: 22px;

    &:first-child {
        margin: 0;
    }
}

.login_input {
    height: 100%;
    width: 80%;
    border: 0px;
    margin-left: 22px;
    background: none;
    outline: none;
}

.login_option_div {
    height: 40px;
}

.font_size {
    font-size: 14px;
}

.msg_code_div {
    float: left;
    width: 150px;
}

.forget_psw_div {
    float: left;
    text-align: right;
    width: 150px;
}

.login_msgcode_div {
    float: left;
    width: 150px;
    height: 44px;
    /*margin-top: 30px;*/
    border: 1px solid rgba(153, 153, 153, 1);
    border-radius: 22px;
}

.login_msgcode_input {
    height: 100%;
    border: 0px;
    margin-left: 22px;
    background: none;
    outline: none;
    width: 110px;
}

.btn_send_msgcode_div {
    float: right;
    height: 44px;
}

.btn_send_msgcode {
    margin: 0 auto;
    height: 42px;
    width: 100px;
    background-color: #006ade;
    border-radius: 10px;
    outline: none;
}

.btn_login_div {
    display: block;
    /*margin-top: 20px;*/
    height: 40px;
}

.btn_login {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-radius: 20px;
    background-color: #006ade;
    outline: none;
    font-size: 11px;
    color: #fff;
}

.register_div {
    margin-top: 10px;
    height: 30px;
    width: 300px;
    text-align: right;
    font-size: 13px;
    color: #999;
}

.sheet-content {
    display: block;
    padding: 20px 50px;
    margin: 0 auto;

    .errorMsg {
        color: #dd2221;
        text-align: center;
    }
}
</style>
